<template>
  <div id="box" :class="{ 'v-radius': round, 'v-hidden': round }">
    <!-- 图片 -->
    <div id="banner">
      <div id="banner-inner" :ref="receiveBannerBox">
        <img v-for="(src, i) of images" :key="i" :src="src" class="v-fill-size">
      </div>
    </div>

    <!-- 下标 -->
    <div id="subfix">
      <template v-for="(src, i) of images" :key="i">
        <div :ref="receiveSubfixItem" class="subfix-item v-blur" :data-key="i" @click="shift">
          <div :ref="receiveSubfixItemInner" class="subfix-item-inner v-blur" :data-key="i"></div>
        </div>
      </template>
    </div>

    <!-- 左右两边的按钮 -->
    <div class="left carousel-icon" :class="iconClass" @click="iconShift('left')">
      <v-icon icon="icon-left-circle-fill" width="2em" height="2em"  color="#fff" />
    </div>
    <div class="right carousel-icon" :class="iconClass" @click="iconShift('right')">
      <v-icon icon="icon-right-circle-fill" width="2em" height="2em" color="#fff" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, nextTick, computed } from "vue";
import { useCarousel } from "./useCarousel.ts";
import Icon from '@/components/Icon.vue';
export default defineComponent({
  name: "Carousel",
  components: {
    'v-icon': Icon
  },
  props: {
    round: {
      type: Boolean,
      default: false
    },
    images: {
      type: Array,
      default: () => []
    },
    iconRound: {
      type: Boolean,
      default: false
    }
  },
  setup(props, content) {
    const use = useCarousel(props, content);
    const iconClass = computed(() => {
      const classes: any[] = [];
      classes.push(props.iconRound ? 'icon-round' : 'icon-plane');
      return classes;
    });
    onMounted(() => {
      nextTick(() => {
        use.countDown();
      });
    });
    return { ...use, iconClass };
  }
});
</script>


<style scoped>
.subfix-item {
  background: rgba(0, 0, 0, 0.3);
  width: 60px;
  height: 5px;
  margin: 15px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 40px;
}
.subfix-item-inner {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: all .25s ease-out;
}
#box {
  width: 900px;
  height: 600px;
  box-shadow: 0 12px 40px #333;
  overflow: hidden;
  position: relative;
}
#box:hover .carousel-icon {
  opacity: 1;
}
#subfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#banner {
  width: 100%;
  height: 100%;
}
#banner-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  /* 1200为一个临界点 */
  left: 0;
  top: 0;
  display: flex;
}
.carousel-icon {
  position: absolute;
  width: 50px;
  cursor: pointer;
  transition: opacity .25s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.carousel-icon:hover {
  backdrop-filter: blur(10px);
}

.icon-round {
  border-radius: 50%;
  top: 50%;
  height: 50px;
}

.icon-plane {
  height: 96%;
  top: 2%;
  border-radius: 40px;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}
</style>